什麼是產品視覺設計方向

💡 定義視覺風格，再從風格中去發展設計元素

視覺風格: 第一印象看起來怎麼樣
一件作品帶給你的直覺感受與情緒共鳴。換句話說，就是當你看到一個網站、App，或任何設計作品時，心裡浮現的第一感受。通常會用一些偏感性、描述氛圍的形容詞來形容，例如簡單、現代、優雅、頹廢粗獷、復古等等。

簡單分享兩個喜歡的常用產品的視覺設計風格。

Notion
極簡的現代風格，但又搭配趣味的插畫增添趣味性。Notion 的 AI Chat 會有一個類似人在做思考的動畫，這也是趣味人性化的設計互動，在使用眾多一致體驗的 AI Chat 時，Notion 總能增添一些使用上的樂趣。

Raycast
現代前衛的光軌風格，帶有神秘的科技感，卻又搭配略帶復古的手繪插畫，形成一種很特別的氛圍。

設計元素
元素包含字體、排版、色彩。

字體
字體的選擇，間距、行高都會影響使用者對於閱讀的感受，例如我們做了一張美美的海報，總不可能會用新細明體來放對吧，另外字體的行高與字元的間距也會影響閱讀的舒適度，以文章封面卡片為範例，在看右圖時，會發現沒有設定適當的距離，字體就會給人一種很緊密沒有呼吸感的氛圍，反之有了一定的距離和空間後，閱讀起來也讓人更舒服。

排版: 資訊的階層性
好的資訊階層性可以讓使用者知道哪些是重要的資訊，我們可以透過文字的大小、顏色的強調來進行設計。同樣以封面卡片為例，標題是我想傳達的重要資訊，所以選擇較大的字體大小，而副標沒這麼重要，所以我稍微改變了字體形式、大小、以及用不顯眼的灰色系來讓他不要這麼突兀。

色彩
因為目標想做呼吸 App，所以我定調使用藍天、雲產生的氣流等來作為我的意象，單純天空藍略顯單調，所以採用漸層形式的藍色來作為我的主要運用的色彩。

風格探索

進行風格探索時，我會嘗試用 2-3 個形容詞來形容產品想要讓使用的人有什麼感覺。

平靜、自然、溫暖

接著再從這些形容詞，去探索和回想各種視覺素材，用幾張照片製作成視覺靈感的模板，作為之後實際產設計時的參考。

以下是我聯想到和關聯的視覺意象。

• 圖一：在藍天下，呼吸就像雲的氣流緩緩流動。

• 圖二：格林威治天文台的夕陽漸層，今天有看到這麼美的夕陽，這天也算圓滿了。

• 圖三：在日本參觀寺廟時，很喜歡日本侘寂風格（Wabi-Sabi），給人一種低調自然的寧靜。

Day 5 內容預告

Day 5 會開始進行 Wireframe 的繪製，畫出產品的主要畫面的流程草稿，定義產品的流程。明天見，Cheers🍻